<template>
  <div>
    <content-wrapper
      :tableList="tableList"
      :searchList="searchList"
      :setting="setting"
      @changeTable="changeTable"
      @formValue="formValue"
    ></content-wrapper>
  </div>
</template>

<script>
export default {
  name: "index",
  components: {
    contentWrapper: () => import("@/components/contentWrapper/index")
  },
  data() {
    return {
      tableList: {
        columns: [
          {
            title: "ID",
            dataIndex: "id"
          },
          {
            title: "IP",
            dataIndex: "ip"
          },
          {
            title: "用户",
            dataIndex: "username"
          },
          {
            title: "登录时间",
            dataIndex: "created_at"
          }
        ],
        dataSource: [],
        pagination: {
          current: 1,
          pageSize: 10,
          total: 0
        },
        sorter: {}
      },
      searchList: [
        {
          type: "input",
          label: "IP",
          placeholder: "IP",
          name: "ip"
        }
      ],
      searchInfo: {
        ip: ""
      },
      setting: {}
    };
  },
  methods: {
    changeTable(pagination) {
      Object.assign(this.tableList.pagination, pagination);
      this.getInfo();
    },
    formValue(values) {
      this.tableList.pagination.current = 1;
      Object.assign(this.searchInfo, values);
      this.getInfo();
    },
    getInfo() {
      this.$ajax
        .get(this.$api.loginLogList, {
          ip: this.searchInfo.ip,
          page_size: this.tableList.pagination.pageSize,
          page: this.tableList.pagination.current
        })
        .then(res => {
          for (let item of res.data) {
            item.created_at = this.$commonJs.timer(item.created_at);
          }
          this.tableList.dataSource = res.data;
          this.tableList.pagination.total = res.total_count;
        })
        .catch(err => {
          this.$notification.error({
            message: err
          });
        });
    }
  },
  created() {
    this.getInfo();
  }
};
</script>

<style scoped lang="less"></style>
